<template>
  <div ref="container" style="padding-bottom: 18vw;" :loading="loading">
    <div class="head">
      <van-icon name="arrow-left" class="plan-nav__back" @click="backList" />
      <div class="title">
        {{ planInfo.plan_title }}
      </div>
    </div>
    <div v-if="!isError">
      <section>
        <div v-if="planInfo.declaration!==''" style="padding-bottom: 16px;">{{ planInfo.declaration }}</div>
        <div v-if="planInfo.img_url.length>0" class="imgWrap">
          <van-image v-for="(item,index) in planInfo.img_url" :key="index"
                     width="90px"
                     height="90px"
                     fit="cover"
                     :src="item"
                     @click="imgView(planInfo.img_url,index)"
          />
        </div>
        <div v-if="planInfo.plan_title " class="hiddenStr">
          {{ planInfo.is_hidden==1?'匿名评价':'实名评价' }}
        </div>
        <van-cell v-for="(item,index) in list" :key="index" center :title="item.user_name+' 老师'" :label="item.label_title">
          <template #icon>
            <van-icon name="manager" class="userHead" />
          </template>
          <!-- :value="item.is_finish == 0?'待评价':'已评价'" -->
          <template #default>
            <span :class="{ green:item.is_finish == 0}" @click="toAnswer(index)">{{ item.is_finish == 0?'待评价':'已评价' }}</span>
            <van-icon name="arrow" @click="toAnswer(index)" />
          </template>
        </van-cell>
      </section>
    </div>
    <van-empty v-if="isError" image="error" :description="errorMsg">
      <van-button round color="#6e6ef1" class="bottom-button" @click="backList">
        返回到列表
      </van-button>
    </van-empty>
  </div>
</template>

<script>
import { Row, Col, Icon, Cell, CellGroup, Tag, Toast } from 'vant';
import { CountDown, Field, Image as VanImage, ImagePreview, Tab, Tabs, RadioGroup, Radio, Checkbox, CheckboxGroup, Button, Sticky, Uploader, Empty, Dialog } from 'vant';
import { Popup, Picker, DatetimePicker, Calendar } from 'vant';
// import wechat from '../../util/wechat';
// import wx from "weixin-js-sdk";
import errorImg from "../../assets/img/error.jpg";
import okImg from "../../assets/img/ok.jpg";
// import List from './list.vue';

// import uploadWxImage from '../../util/imgUp/upload'
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [CellGroup.name]: CellGroup,
    [CountDown.name]: CountDown,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Field.name]: Field,
    [VanImage.name]: VanImage,
    [ImagePreview.name]: ImagePreview,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Button.name]: Button,
    [Sticky.name]: Sticky,
    [Uploader.name]: Uploader,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Calendar.name]: Calendar,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Dialog.name]: Dialog,
    [Dialog.Component.name]: Dialog.Component,
    [Empty.name]: Empty
  },
  data() {
    return {
      planInfo:{
        "id": '',
        "plan_title": "",
        "declaration": "",
        "img_url":[],
        "eval_from_to": "",
        "is_self_eval": 1,
        "is_edit_eval": 1,
        "message_send_name": "",
        "is_hidden": '',
        "begin_time": "",
        "end_time": "",
        "status": 3,
        "password": "",
      },
      errorImg: errorImg,
      okImg: okImg,
      id: '',
      loading: false,
      list: [],
      isError:false,
      errorMsg:''
    };
  }, created() {

  }, beforeDestroy() {

  }, mounted() {
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      overlay: true,
    })
    sessionStorage.removeItem('jhpjSN')
    this.id=this.$route.query.planId
    const that = this
    const promise = new Promise((resolve, reject) => {
      //从横版跳转--获取计划详情
      if (sessionStorage.baseUser === undefined) {
        sessionStorage.nowChild = that.$http.getUrlParam('studentId')
        this.login((res) => {
          resolve(1)
        })
      } else {
        resolve(1)
      }
    });
    //如果有登录信息执行其他操作
    promise.then((data) => {
      // 获取计划信息
      if (data === 1) {
        //获取微信权限
        // wechat();
        this.getInfo()
      } 
    });
  }, methods: {
    // 图片预览
    imgView (item, index) {
      ImagePreview({
        images: item,
        startPosition: index
      });
    },
    backList(){
      this.$router.push({
        name: "tList"
      });
    },
    // 登录
    async login(okfun) {
      const params = {
        identity: 1,
        org_id: this.$http.getUrlParam('org_id'),
        version: 3,
        openid: this.$http.getUrlParam('openid')
      }
      const res = await this.$api.base.login.post(params);
      if (res.code === 200) {
        sessionStorage.baseUser = JSON.stringify(res.data)
        if (okfun) okfun();
      } else {
        if (res.code === "1011") {
          Dialog.alert({
            message: "获取登录信息失败，请重新登录！",
            confirmButtonColor: "#06c09b"
          }).then(() => {
            // on close
            window.location.href = "/shijiwxy/weixin/html/parent/login/login_byPSW.html";
          });
        } else {
          Dialog.alert({
            message: res.message,
            confirmButtonColor: "#06c09b"
          })
        }
      }
    },
    toAnswer(index) {
      sessionStorage.zhpjtPlanInfo=JSON.stringify(this.planInfo)
      sessionStorage.zhpjQList=JSON.stringify(this.list)
      this.$router.push({
        name: "tQuestion",
        query: {
          index:index
        },
      });
    },
    // 获取计划详情
    async getInfo() {
      const res = await this.$api.list.plan.get({"plan_id":this.id,'login_user_id':JSON.parse(sessionStorage.baseUser).orguser.user_id});
      Toast.clear();
      if (res.code === 200) {
        this.planInfo=res.data.plan
        this.planInfo.img_url=JSON.parse(this.planInfo.img_url).map(item => item.url)
        console.log(this.planInfo.img_url)
        this.list=res.data.list
        if(this.list.length === 0){
          Toast.fail('您无需评价');
        }
      } else {
        this.isError=true
        this.errorMsg=res.message
        // Toast.fail(res.message);
        // Dialog.alert({
        //   title: '提示',
        //   confirmButtonColor: '#06c09b',
        //   message: "请假成功,用餐信息变更失败，请联系客服人员进行调整！",
        // }).then(() => {
        //   //window.location = "../index_new.html"
        //   window.history.back()
        // });
      }
    },
    back() {
      window.history.back()
    }
  }
};
</script>

<style lang="less" scoped>
@bzcolor: #6e6ef1;
 .head {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 44px;
  background-color: #fff;
  .title {
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
    overflow: hidden; /* 确保超出容器的文本被裁剪 */
    white-space: nowrap; /* 防止文本换行 */
    text-overflow: ellipsis; /* 在文本超出容器宽度时显示省略号 */
    max-width: 80%;
  }
  .plan-nav__back {
    position: absolute;
    top: 15px;
    left: 16px;
    width: 24px;
    font-size: 20px;
    height: 24px;
    cursor: pointer;
}
 }
 section {
  padding: 16px;
  .imgWrap {
    padding: 0 0 16px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: flex-start;
    box-sizing: border-box;
    flex-wrap: wrap;
  }
  .userHead {
    margin-right: 13px;
    font-size: 24px;
    color: #b3bfcc;
    border-radius: 50%;
    padding: 6px;
    border: 1px #b3bfcc dashed;
  }
  .hiddenStr {
    margin: 0;
    padding: 0px 6px 16px 0;
    color: rgba(69, 90, 100, 0.6);
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
  }
 }
 .van-image {
    margin: 2px;
}
.green {
  color: #24bfa0;
}
</style>